<template>
  <div class="container">
    <!-- 双向绑定：v-model:value 写成 v-model -->

    <!--input-文本输入框-->
    <input class="input" type="text" v-model="input" />
    <!--textarea-多行文本域-->
    <textarea class="textarea" placeholder="请输入内容" v-model="textarea"></textarea>
    <!--input-单选框-->
    <div class="gender_container">
      <input class="gender" type="radio" name="gender" value="male" v-model="gender" />男
      <input class="gender" type="radio" name="gender" value="female" v-model="gender" />女
    </div>
     <!--input-复选框-->
    <div class="hobbies_container">
      <input class="hobby" type="checkbox" value="basketball" v-model="hobbies" />篮球
      <input class="hobby" type="checkbox" value="football" v-model="hobbies" />足球
      <input class="hobby" type="checkbox" value="pingpong" v-model="hobbies" />乒乓球
    </div>
    <!--select-下拉框-->
    <select class="selectOpt" v-model="optSelect">
      <option selected value="">---请选择省份---</option>
      <option value="gd">广东省</option>
      <option value="hn">湖南省</option>
      <option value="bj">北京市</option>
      <option value="js">江苏省</option>
    </select>


  </div>
</template>
<script setup>
  import { ref } from 'vue';

  let input = ref("Hello")
  let textarea = ref("")
  let gender = ref("")
  let hobbies = ref([])
  let optSelect = ref("")

</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
  }
  .input, .textarea {
    margin-top: 20px;
    width: 50%;
  }
  .gender_container {
    margin-top: 20px;
  }
  .hobbies_container {
    margin-top: 20px;
  }
  .selectOpt {
    width: 50%;
  }

</style>